<template>
  <div :class="`linkage-params-setting ${visualThemeClassName}`">
    <VsFormItem
      :label="$demoi18n('panelEvent.label.issueEvent')"
      prop="key"
    >
      <el-input
        v-model="event.key"
        :placeholder="$demoi18n('word.plsInput')"
        size="default"
      ></el-input>
    </VsFormItem>

    <div class="params_table">
      <table>
        <tr>
          <th class="eventKey_th">{{ $demoi18n('common.eventKey') }}</th>
          <th class="eventVal_th">
            {{ $demoi18n('common.advanced-linkage.fieldInputValue') }}
          </th>
          <th width="20">
            <el-button
              :link="true"
              type="primary"
              icon="Plus"
              size="default"
              @click="addEventParam()"
            ></el-button>
          </th>
        </tr>
        <tr
          v-for="(param, i) in event.parameters"
          v-show="!param.key.includes('emit_params_obj')"
          :key="param.id"
        >
          <td>
            <ValueInputer
              v-model:value="param.key"
              required
            />
          </td>
          <td>
            <ValueInputer
              v-if="srcFieldEnumVals.length"
              v-model:value="param.value"
              value-type="List"
              :enum-values="srcFieldEnumVals"
            />
          </td>
          <td>
            <el-button
              :link="true"
              type="primary"
              icon="Delete"
              size="default"
              @click="delItem(i)"
            ></el-button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import { mapMutations, mapState } from 'vuex';
import { EMIT_PARAMS_OBJ } from '@/utils/constant';

export default {
  components: { ValueInputer },
  inject: {
    getPanelVm: {
      default: () => null,
    },
  },
  props: {
    event: Object,
    widgetInstanceId: String,
  },
  data() {
    return {
      panelDataForm: null,
      timer: null,
    };
  },
  computed: {
    ...mapState({
      panelConfigs: state => state.VisualComponentsModule.panelConfigs,
    }),
    srcFieldEnumVals() {
      const tableData = this.panelDataForm?.tableData || [];
      const enums = tableData.map(n => ({
        label: n.field,
        value: `{${n.field}}`, // 字段变量 {y1}
      }));
      return enums;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getPanelDataForm();
  },
  methods: {
    addEventParam() {
      this.event.parameters.push({
        id: '', // 不加id值，不然动态添加参数到了xvue那边会报错
        key: '',
        label: '',
        value: '',
      });
    },
    delItem(i) {
      this.event.parameters.splice(i, 1);
    },
    getPanelDataForm() {
      const panelVm = this.getPanelVm();
      const panelDataForm = panelVm.$refs['panel_data']?.form;
      if (!panelDataForm) {
        clearTimeout(this.timer);
        this.timer = setTimeout(this.getPanelDataForm, 200);
        return;
      }
      this.panelDataForm = panelDataForm;
    },
  },
};
</script>
<style lang="less" scoped>
.linkage-params-setting{
  margin-top: 20px;
  .params_table{
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #e8eaec;
    table{
      width: 100%;
      th{
        padding: 5px 0;
        text-align: center;
      }
      td{
        padding: 2px;
      }
      .eventKey_th{
        width: 120px;
      }
      .eventKey_th{
        width: 104px;
      }
    }
  }
}
.visualComponents_theme_dark{
  .params_table{
    border: 1px solid #116584;
    background-color: #064559;
  }
}
</style>
